// 引入Three.js库
import * as THREE from 'three';

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);

// 创建一个立方体的几何体，参数为立方体的宽度、高度、深度
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个基础网格材质，颜色为绿色
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// 用几何体和材质创建一个网格对象
const cube = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(cube);

// 设置相机的z轴位置，使其远离场景中的物体
camera.position.z = 5;

// 创建一个动画函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 使立方体绕x和y轴旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

// 调用animate函数开始渲染循环
animate();

